<script lang="ts" setup>
import {
  ElMessageBox,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadioGroup,
  ElRadio,
  ElMessage,
  ElSelect,
  ElOption,
  ElTreeSelect,
} from 'element-plus';
import { reactive, ref } from 'vue';

const dialogVisible = ref(false);
const title = ref('添加航线');
const addDialog = () => {
  dialogVisible.value = true;
  title.value = '添加航线';
};

const editDialog = (obj) => {
  dialogVisible.value = true;
  title.value = '编辑航线';
  ruleForm.id = obj.id;
  ruleForm.name = obj.name;
};

defineExpose({ addDialog, editDialog });

const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  id: '',
  account: '',
  name: '',
  lastLevel: '',
  status: '1',
  role: '',
});

const rules = reactive({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    {
      min: 6,
      max: 18,
      message: '请输入6-18位字符，允许英文字母、数字或特殊符号',
      trigger: 'blur',
    },
  ],
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    {
      min: 2,
      max: 18,
      message: '请输入2-18位字符，允许英文字母、汉字、数字',
      trigger: 'blur',
    },
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  lastLevel: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
});
const treeData = ref([]);
const roleOptions = [
  {
    value: '1',
    label: '超级管理员',
  },
  {
    value: '2',
    label: '管理员',
  },
  {
    value: '3',
    label: '普通用户',
  },
];
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 添加成功
      ElMessage({
        plain: true,
        message: '添加成功',
        type: 'success',
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
  // ElMessageBox.confirm("确定关闭对话框?")
  //   .then(() => {
  //     dialogVisible.value = false;
  //   })
  //   .catch(() => {
  //     // catch error
  //   });
};
</script>

<template>
  <div class="page">
    <ElDialog
      v-model="dialogVisible"
      :title="title"
      width="500"
      center
      :before-close="handleClose"
    >
      <div>
        <ElForm
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <ElFormItem label="航线名称" prop="name">
            <ElInput v-model="ruleForm.name" placeholder="请输入航线名称" />
          </ElFormItem>
        </ElForm>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="resetForm(ruleFormRef)">取消</ElButton>
          <ElButton type="primary" @click="submitForm(ruleFormRef)">
            确定
          </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>
